<template>
<div style="font-size:12px">
	<el-row :gutter="24"> 
		<el-col :xs="24" :sm="24" :md="24" :lg="24"> 
			<el-button @click.native.prevent="back()" size="" style="padding: 5px 7px">
       			返回
        	</el-button>			
		</el-col> 
	</el-row>
	<div style="border: 1px solid #dfe6ec;">
		<el-row :gutter="24" style="padding:5px;border: 1px solid #dfe6ec;margin:0px;"> 
			<el-col :xs="24" :sm="24" :md="24" :lg="24"> 
				<span style="font-size:1.1em">{{cabinet.cabinetCode}}</span> 
				<span style="font-size:1.1em;float:right">{{used}}</span> 
			</el-col> 
		</el-row>
		<el-row :gutter="24" style="padding:5px;border: 1px solid #dfe6ec;margin:0px;"> 
			<el-col :xs="24" :sm="24" :md="24" :lg="24"> 
				<span style="font-size:1.1em">
					{{cabinet.areaName + cabinet.countryName + cabinet.provinceName + cabinet.cityName + '机房'}} 
					联系人：杨光 联系电话：1234567890 截止日期：2017-12-25</span> 
			</el-col> 
		</el-row>
		<el-row :gutter="24" style="padding:5px;border: 1px solid #dfe6ec;margin:0px;"> 
			<el-col :xs="10" :sm="10" :md="10" :lg="10">
		        <el-table :data="cabinet.cabinetUse" highlight-current-row v-loading.body="listLoading" element-loading-text="加载中..." 
		        	border style="width: 100%;margin:20px 0;"  ref="cabinetUseTable"
		        	@current-change="handleCurrentChange">
		            <el-table-column label="#" min-width="40px">
		                <template scope="scope">
		                    <span>{{ scope.$index+1 }}</span>
		                </template>
		            </el-table-column>
		            <el-table-column label="SN编号" min-width="180px">
						<template scope="scope">
				        	<el-button type="text" size="small">
				       			{{ scope.row.snNum}}
				        	</el-button>
				      	</template>	                
		            </el-table-column>
		            <el-table-column label="设备类型" min-width="130px">
		                <template scope="scope">
		                    <span>{{scope.row.eqptType}}</span>
		                </template>
		            </el-table-column>
		        </el-table>			 
			</el-col>
			<el-col :xs="14" :sm="14" :md="14" :lg="14"> 
	        	<div style="margin: 20px 0px;">
					<div style="margin: 10px 0px;">
					<el-button @click.native.prevent="updateDevice()" size="" style="padding: 5px 7px">
		       			修改配置
		        	</el-button>
					<el-button @click.native.prevent="deviceShow()" size="" style="padding: 5px 7px">
		       			查看设备
		        	</el-button>
		        	</div>
		        	<drop-bitmap-server v-if="deviceShow && deviceShow.deviceBase && deviceShow.deviceBase.eqptType === '1'" :device="deviceShow"></drop-bitmap-server>
		        	<drop-bitmap-switch v-if="deviceShow && deviceShow.deviceBase && deviceShow.deviceBase.eqptType === '2'" :device="deviceShow"></drop-bitmap-switch>
		        	<drop-bitmap-firewall v-if="deviceShow && deviceShow.deviceBase && deviceShow.deviceBase.eqptType === '4'" :device="deviceShow"></drop-bitmap-firewall>       	   	
	        	</div>
			</el-col>		
		</el-row>
	</div>
	<server-manage v-if="deviceShow && deviceShow.deviceBase.eqptType === '1'" :server="deviceShow" ref="serverManage"></server-manage>
	<switch-manage v-if="deviceShow && deviceShow.deviceBase.eqptType === '2'" :switchDevice="deviceShow" ref="switchManage"></switch-manage>
	<firewall-manage v-if="deviceShow && deviceShow.deviceBase.eqptType === '4'" :firewall="deviceShow" ref="firewallManage"></firewall-manage>
</div>
</template>
<style>

</style>
<script>
import firewall from './dropBitmapFirewall.vue';
import server from './dropBitmapServer.vue';
import aswitch from './dropBitmapSwitch.vue';
import serverManage from './serverManage.vue';
import switchManage from './switchManage.vue';
import firewallManage from './firewallManage.vue';
export default {
	components : {
		'drop-bitmap-firewall' : firewall,
		'drop-bitmap-server' : server,
		'drop-bitmap-switch' : aswitch,
		serverManage ,
		switchManage ,
		firewallManage
	},
	name : 'drop-bitmap',
	props : {
		cabinet : {
			type : Object,
			default : {}
		},
	},
	data () {
		return {
			listLoading : true,
			device : null,
			deviceShow : null,
			inputWidth : {
				width : '100%'
			},
			formLabelWidth : '20%',
			fireWallRules : {

			}
		}
	},
	computed : {
		used : function() {
			return '使用情况：   ' + (this.cabinet && this.cabinet.cabinetUse ? this.cabinet.cabinetUse.length : '0')
				+ '/' + (this.cabinet && this.cabinet.cabinetUse ? this.cabinet.cabinetAll.length : '0');
		}
	},
	created : function() {},
	mounted () {
		this.getDeviceMap();
	},
	updated () {},
	watch : {
		"device" : function(curVal, oldVal) {
			if (!oldVal || (curVal.deviceId !== oldVal.deviceId)) {
				this.getDeviceDetail(curVal);
			}
		}
	},
	methods : {
		handleValid () {},
		back : function() {
			this.$emit("back");
		},
		getDeviceMap : function() {
			let _url = '/resman/map/base/' + this.cabinet.roomId + '/' + this.cabinet.cabinetId;
			this.$http.get(_url).then((response) => {
				if (response.code === 0) {
					this.cabinet.cabinetUse = response.data.cabinetUse.filter(item => item.state === '1');
					this.cabinet.cabinetAll = response.data.cabinetUse;
					const defaultRow = this.cabinet.cabinetUse && this.cabinet.cabinetUse.length > 0 ?
						this.cabinet.cabinetUse[0] : {};
					setTimeout(_ => {
						this.$refs.cabinetUseTable.setCurrentRow(defaultRow);
					}, 500);
					this.device = defaultRow;
					this.listLoading = false;
				} else {
					this.listLoading = false;
				}
			}).catch((response) => {
				setTimeout(() => {
					this.listLoading = false;
				}, 400);
				console.log(response)
			})
		},
		getDeviceDetail : function(device) {
			let _url;
			if (device.eqptType === '1') {
				_url = '/resman/map/server/' + device.deviceId;
			} else if (device.eqptType === '2') {
				_url = '/resman/map/switch/' + device.deviceId;
			} else if (device.eqptType === '4') {
				_url = '/resman/map/firewall/' + device.deviceId;
			}
			this.$http.get(_url).then((response) => {
				if (response.code === 0) {
					this.deviceShow = response.data;
				} else {
					console.log(response.statusText)
				}
			}).catch((response) => {
				setTimeout(() => {
				}, 400);
				console.log(response);
			})
		},
		updateDevice : function() {
			if (this.deviceShow) {
				if (this.deviceShow.deviceBase.eqptType === '1') {
					this.$refs['serverManage'].show = true;
				} else if (this.deviceShow.deviceBase.eqptType === '2') {
					this.$refs['switchManage'].show = true;
				} else if (this.deviceShow.deviceBase.eqptType === '4') {
					this.$refs['firewallManage'].show = true;
				}
			} else {
				this.showWarning('请选择一条记录操作！', '错误');
			}
		},

		showWarning (msg, title) {
			this.$alert(msg, title, {
				showConfirmButton : false,
				showCancelButton : true,
				cancelButtonText : '关闭',
				type : 'warning'
			});
		},
		handleCurrentChange : function(currentRow, oldCurrentRow) {
			if (!oldCurrentRow || currentRow.deviceId !== oldCurrentRow.deviceId) {
				this.device = currentRow;
			}
		}
	}
}
</script>